<template>
	<view class="home page bgf6">

		<scroll-view class="list rel bgf6" @scroll="onScroll" @scrolltolower="nextPage" scroll-y  lower-threshold="550">
			<view class="logobox shadow" :class="fixedClass" :style="{paddingTop: statusBar + 'px'}">
				<image class="title px12" src="/static/img/icon/title.png" mode="widthFix"></image>
				<view class="tabbox px12 c66 fs14 pb12 pt8 flex flexC" :class="fixedClass">
					<view v-for="(item,index) in tabs" class="item pr20 py6" :key="index" @click="clickTabType(index)">
						<text :class="selIndex == index ? 'active' : ''">{{item.name}}</text>
						<image v-if="selIndex == index" class="icon" src="/static/img/icon/sel.png" mode="widthFix">
						</image>
					</view>
				</view>
			</view>
			<swiper autoplay circular class="bgImg boxS">
				<swiper-item>
					<image class="w-20"
						src="https://img.quexiaqp.com/uploads/20250612/c7cdcd9ea2f6567c4c846b7ec0cf2fc4.jpg"
						mode="widthFix" @click="bannerClick()"></image>
				</swiper-item>
				<swiper-item>
					<image class="w-20"
						src="https://img.quexiaqp.com/uploads/20250818/dbfe011003d3d8f6af35dc6b776c2d51.jpg"
						mode="widthFix" @click="bannerClick()"></image>
				</swiper-item>
<!-- 				<swiper-item>
					<image class="w-20"
						src="https://img.quexiaqp.com/uploads/20250610/57d177fc45ed3c69ad51f059f4e7b713.jpg"
						mode="widthFix" @click="bannerClick()"></image>
				</swiper-item>thFix"></image> -->
			</swiper>
			<view class="flex flexC aliC c2e fs15 mx8 mb10 bgf00 tab mt10 tab2">
				<view @click="clickTab(0)" class="flex1 py9 shadow qp" :class="tabIndex == 0 ? 'bgff' : 'bgf6c'">棋牌/台球
				</view>
				<view @click="clickTab(1)" class="flex1 py9 ml2 shadow ktv" :class="tabIndex == 1 ? 'bgff' : 'bgf6c'">KTV
				</view>
			</view>
			
			<scroll-view class="list" @scrolltolower="nextPage" scroll-y :style="{height: 'calc(100vh - 234rpx - ' + statusBar +'px)'}">
				<view v-if="tabIndex == 0" class="sub-view-2 r8 fs14 px8 pb6 bgff mx14 m6 px10 py6">
					<view class="title_1">
						<text>棋牌/台球 投资预算与回报</text>
					</view>
					<view class="flex flexC flexB py12 fs18">
						<view class="">单个门店的投入</view>
						<view class="" style="padding-right: 10px;">￥10万元起</view>
					</view>
					<view class="singer-view" style="margin-bottom: 15px;">包含品牌、选址、设计、培训、策划、运营等。具体费用根据开店城市、面积、包厢数等确定，将由招商经理核算后与您告知。</view>
					<view style="height: 1px;background-color: #d8d8d8;"></view>
					<view class="flex flexC flexB py6" style="margin-top: 10px;">
						<view class="">回本周期</view>
						<view class="" style="padding-right: 10px;">约8到10个月</view>
					</view>
					<view class="singer-view">具体回本周期根据店铺实际运营情况而定。</view>
					
				</view>
				
				<view v-if="tabIndex == 1" class="sub-view-2 r8 fs14 px8 pb6 bgff mx14 m6 px10 py6">
					<view class="title_1">
						<text>KTV 投资预算与回报</text>
					</view>
					<view class="flex flexC flexB py12 fs18">
						<view class="">单个门店的投入</view>
						<view class="" style="padding-right: 10px;">￥50万元起</view>
					</view>
					<view class="singer-view" style="margin-bottom: 15px;">包含品牌、设计、选址、装修、设备、店内广告、标识标牌等。具体费用根据开店城市、面积、包厢数等确定，将由招商经理核算后与您告知。</view>
					<view style="height: 1px;background-color: #d8d8d8;"></view>
					<view class="flex flexC flexB py6" style="margin-top: 10px;">
						<view class="">回本周期</view>
						<view class="" style="padding-right: 10px;">约8到10个月</view>
					</view>
					<view class="singer-view">具体回本周期根据店铺实际运营情况而定。</view>
					
				</view>
				
				<uni-popup ref="updatePop" type="bottom">
					<view class="popup-content2">
					</view>
			
				</uni-popup>
			
			</scroll-view>

		</scroll-view>
	</view>
</template>

<script>
import newTab from '@/components/new-tabBar/new-tabBar.vue';

export default {
  components: {
    newTab
  },
  data() {
    return {
      currentPage: 'home',
	  tabIndex:0,
    };
  },
  methods: {
	clickTab(index) {
		this.tabIndex = index;
	},
	bannerClick() {
		console.log('======点击申请===')
		uni.navigateTo({
			url: '/other/join/join'
		})
	},
	  
  }
};
</script>

<style lang="scss" scoped>
	.home {
		position: relative;
		.logobox {
			position: fixed;
			top: -100rpx;
			width: 100%;
			z-index: 99;
			box-sizing: border-box;
			transition: top .6s ease, opacity .6s ease;
			background-color: #fff;
			opacity: 0;
			.title {
				width: 400rpx;
			}

			.tabbox {
				background-color: #fff;
			}
		}

		.menubox {
			.item {
				position: relative;

				&:after {
					content: '';
					width: 2rpx;
					height: 100rpx;
					position: absolute;
					top: calc(50% - 50rpx);
					right: 0;
					z-index: 2;
					background-color: rgba(229, 229, 229, .7);
				}
				.icon {
					width: 58rpx;
					height: 58rpx;
				}
			}
		}

		.searchbox {
			position: relative;
			margin-top: -60rpx;
			z-index: 1;

			.bgImage {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
			}

			.title {
				position: relative;
				z-index: 2;

				.logo {
					width: 336rpx;
					height: 62rpx;
				}
			}

			.search {
				position: relative;
				z-index: 2;
				background-color: #f2f2f2;
			}
		}

		.tabbox {
			&.fixed {
				position: fixed;
				top: 250rpx;
				left: 0;
				width: 100%;
				z-index: 100;
				box-sizing: border-box;
				background: linear-gradient(-180deg, #f7de6a, #fbe47a, #fbf2cb);
			}

			.item {
				position: relative;

				.active {
					color: #1A1B20;
					font-weight: 600;
				}

				&::after {
					content: '';
					width: 2rpx;
					height: 26rpx;
					background-color: #CFCFCF;
					position: absolute;
					top: calc(50% - 12rpx);
					right: 24rpx;
				}
				.icon {
					width: 38rpx;
					height: 10rpx;
					position: absolute;
					bottom: -0rpx;
					left: calc(50% - 13rpx - 28rpx);
				}
			}

			.img {
				width: 236rpx;
			}

			.img2 {
				width: 306rpx;
			}
		}

		.contbox {
			.cont {
				position: absolute;
				height: 100%;
				width: 100%;
				top: 0;
				left: 0;
			}

			.left {
				position: relative;
				margin-left: 6px;

				.imgbg {
					width: 106%;
					height: 280rpx;
				}
			}

			.left2 {
				position: relative;
				margin-left: 14rpx;

				.imgbg {
					width: 93%;
					height: 130rpx;
				}
			}

			.right {

				.box {
					position: relative;
				}

				.imgbg {
					width: 95%;
					height: 130rpx;
				}
			}
		}

		.bg {
			width: 100%;
			height: 442rpx;
			position: absolute;
			top: 0;
			left: 0;
			z-index: 0;
		}

		.rel {
			position: relative;
			z-index: 1;
		}

		.c1a {
			color: #1a1a1a;
		}

		.sear {
			width: 24rpx;
			height: 24rpx;
		}

		.bgImg {
			height: 524rpx;
			image {
				height: 100% !important;
			}
		}
	}
	.qp{
		border-top-left-radius: 12px;
		border-bottom-left-radius: 12px;
	}
	.ktv{
		border-top-right-radius: 12px;
		border-bottom-right-radius: 12px;
	}
	.title_1{
		background-color: #ebebeb;
		padding: 15px 18px;
		border-radius: 9px;
		width: 70%;
		margin-left: 10%;
		text-align: center;
		margin-top: 12px;
		font-size: 18px;
	}
	.singer-view{
		color: #888888;
		margin-bottom: 4px;
	}
	.sub-view-2{
		box-shadow: 5px 5px 10px rgba(0, 0, 127, 0.2);
	}

</style>
